<template>
  <view class="container">
    <!-- 顶部状态栏 -->
    <view class="header">
      <view class="header-left" @click="goBack">
        <text class="header-icon iconfont">&#xe6a0;</text>
      </view>
      <text class="title">菜品详情</text>
      <view class="header-right"></view>
    </view>
    
    <!-- 主内容区 -->
    <view class="content">
      <!-- 菜品图片 -->
      <view class="dish-image-container">
        <image class="dish-image" :src="dish.image" mode="aspectFill"></image>
        <view class="dish-overlay">
          <text class="dish-name">{{ dish.name }}</text>
          <view class="dish-rating">
            <text class="rating-star" v-for="i in 5" :key="i">
              {{ i <= Math.floor(dish.rating) ? '★' : (i - 0.5 <= dish.rating ? '★' : '☆') }}
            </text>
          </view>
        </view>
      </view>
      
      <!-- 菜品信息 -->
      <view class="dish-info">
        <view class="price-category">
          <text class="dish-price">¥{{ dish.price }}</text>
          <text class="dish-category">{{ tabs[dish.type] }}</text>
        </view>
        
        <view class="info-section chef-info">
          <text class="section-title">厨师</text>
          <view class="chef-detail">
          
            <view class="chef-text">
              <text class="chef-name">{{ dish.chef }}</text>
            
            </view>
          </view>
        </view>
        
        <view class="info-section dish-description">
          <text class="section-title">菜品介绍</text>
          <text class="description-text">{{ dish.description }}</text>
        </view>
        
        <view class="info-section rating-section">
          <text class="section-title">我的评分</text>
          <view class="rating-stars">
            <text 
              class="rating-star-large" 
              v-for="i in 5" 
              :key="i"
              @click="setMyRating(i)"
            >
              {{ i <= myRating ? '★' : '☆' }}
            </text>
          </view>
        </view>
        
        <view class="info-section comment-section">
          <text class="section-title">添加评论</text>
          <textarea 
            class="comment-input" 
            placeholder="分享你对这道菜的看法..." 
            v-model="myComment"
          ></textarea>
          <button class="submit-btn" @click="submitComment">提交评论</button>
        </view>
        
        <view class="info-section comments-section">
          <view class="comments-header">
            <text class="section-title">历史评论</text>
            <text class="view-all" @click="viewAllComments">查看全部</text>
          </view>
          
          <view class="comment-list">
            <view class="comment-item" v-for="(comment, index) in comments" :key="index">
              <view class="comment-user">
                <image class="user-avatar" :src="comment.avatar"></image>
                <text class="user-name">{{ comment.username }}</text>
              </view>
              <view class="comment-rating">
                <text class="rating-star" v-for="i in 5" :key="i">
                  {{ i <= comment.rating ? '★' : '☆' }}
                </text>
              </view>
              <text class="comment-text">{{ comment.content }}</text>
              <text class="comment-date">{{ comment.date }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: 0,
      myRating: 0,
      myComment: '',
      tabs: ['早餐', '午餐', '晚餐'],
      dish: {
        id: 1,
        name: '现磨豆浆',
        rating: 4.5,
        price: 3.00,
        image: 'https://images.unsplash.com/photo-1551326844-4df70f78d0e9?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3',
        type: 0,
        chef: '王师傅',
        chefAvatar: 'https://images.unsplash.com/photo-1577219491135-ce391730fb2c?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3',
        chefDescription: '从事餐饮行业15年，擅长传统早点制作',
        description: '采用优质黄豆现场研磨，口感醇厚，营养丰富。\n\n不添加任何防腐剂，每天限量供应。\n\n建议趁热饮用，口感更佳。'
      },
      comments: [
        {
          username: '张同学',
          avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3',
          rating: 5,
          content: '豆浆很香浓，没有豆腥味，每天早上必买！',
          date: '2023-10-15'
        },
        {
          username: '李同学',
          avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3',
          rating: 4,
          content: '味道不错，就是有时候温度不够热。希望能保持恒温，这样口感会更好。',
          date: '2023-10-14'
        }
      ]
    }
  },
  onLoad(options) {
    if (options.id) {
      this.id = parseInt(options.id);
      // 在实际应用中，这里应该根据ID从服务器获取菜品详情
      // 这里为了演示，使用模拟数据
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    setMyRating(rating) {
      this.myRating = rating;
    },
    submitComment() {
      if (!this.myRating) {
        uni.showToast({
          title: '请先评分',
          icon: 'none'
        });
        return;
      }
      
      if (!this.myComment.trim()) {
        uni.showToast({
          title: '请输入评论内容',
          icon: 'none'
        });
        return;
      }
      
      // 在实际应用中，这里应该将评论提交到服务器
      uni.showToast({
        title: '评论提交成功',
        icon: 'success'
      });
      
      // 模拟添加评论到列表
      const now = new Date();
      const dateStr = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
      
      this.comments.unshift({
        username: '我',
        avatar: 'https://images.unsplash.com/photo-1599566150163-29194dcaad36?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3',
        rating: this.myRating,
        content: this.myComment,
        date: dateStr
      });
      
      // 清空输入
      this.myComment = '';
      this.myRating = 0;
    },
    viewAllComments() {
      uni.navigateTo({
        url: `/pages/dish/comments?id=${this.id}`
      });
    }
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #FAFAFA;
}

.header {
  padding: 40rpx;
  background-color: #FF7A45;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left, .header-right {
  width: 60rpx;
}

.header-icon {
  font-family: "iconfont";
  color: #FFFFFF;
  font-size: 40rpx;
}

.title {
  color: #FFFFFF;
  font-size: 36rpx;
  font-weight: bold;
}

.content {
  flex: 1;
  overflow-y: auto;
}

.dish-image-container {
  position: relative;
  height: 400rpx;
}

.dish-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dish-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30rpx;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}

.dish-name {
  color: #FFFFFF;
  font-size: 40rpx;
  font-weight: bold;
}

.dish-rating {
  margin-top: 10rpx;
}

.rating-star {
  color: #FFA940;
  font-size: 28rpx;
}

.dish-info {
  padding: 30rpx;
}

.price-category {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #F0F0F0;
}

.dish-price {
  font-size: 36rpx;
  font-weight: bold;
  color: #262626;
}

.dish-category {
  font-size: 28rpx;
  color: #8C8C8C;
  padding: 6rpx 16rpx;
  background-color: #F5F5F5;
  border-radius: 20rpx;
}

.info-section {
  margin-bottom: 30rpx;
  padding-bottom: 30rpx;
  border-bottom: 1rpx solid #F0F0F0;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #262626;
  margin-bottom: 20rpx;
  display: block;
}

.chef-detail {
  display: flex;
  align-items: center;
  background-color: #F5F5F5;
  padding: 20rpx;
  border-radius: 12rpx;
}

.chef-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  object-fit: cover;
}

.chef-text {
  margin-left: 20rpx;
  flex: 1;
}

.chef-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #262626;
  display: block;
}

.chef-description {
  font-size: 24rpx;
  color: #8C8C8C;
  margin-top: 6rpx;
  display: block;
}

.description-text {
  font-size: 28rpx;
  color: #595959;
  line-height: 1.8;
  white-space: pre-wrap;
  background-color: #F5F5F5;
  padding: 20rpx;
  border-radius: 12rpx;
  display: block;
}

.rating-stars {
  display: flex;
  background-color: #F5F5F5;
  padding: 20rpx;
  border-radius: 12rpx;
}

.rating-star-large {
  font-size: 50rpx;
  color: #FFA940;
  margin-right: 20rpx;
}

.comment-input {
  width: 100%;
  height: 200rpx;
  background-color: #F5F5F5;
  border-radius: 12rpx;
  padding: 20rpx;
  font-size: 28rpx;
  color: #595959;
  margin-bottom: 20rpx;
  box-sizing: border-box;
}

.submit-btn {
  width: 100%;
  height: 80rpx;
  background-color: #FF7A45;
  color: #FFFFFF;
  font-size: 28rpx;
  border-radius: 8rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.comments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.view-all {
  font-size: 28rpx;
  color: #FF7A45;
}

.comment-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.comment-item {
  background-color: #F5F5F5;
  border-radius: 12rpx;
  padding: 20rpx;
}

.comment-user {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.user-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  object-fit: cover;
}

.user-name {
  margin-left: 16rpx;
  font-size: 28rpx;
  font-weight: bold;
  color: #262626;
}

.comment-rating {
  margin-top: 10rpx;
  margin-bottom: 10rpx;
}

.comment-text {
  margin-top: 16rpx;
  font-size: 28rpx;
  color: #595959;
  line-height: 1.5;
  display: block;
}

.comment-date {
  margin-top: 10rpx;
  font-size: 24rpx;
  color: #8C8C8C;
  display: block;
}
</style> 